<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>选择器的优先级</title>
        <style>
            #box{
                width: 200px;
                height: 200px;
                background-color: red;
            }
            .a{
                border: 5px solid black;
                background-color: pink !important;
            }
        </style>
    </head>
    <body>

    <!--
        !important>行内样式>ID选择器>类选择器>元素选择器>*
        行内样式：1000
        ID选择器：100
        类选择器（伪类选择器，属性选择器）：10
        元素选择器（伪元素选择器）：1

        #box        100
        div         1
        .a          10
        div>p       2
        p.a         11
        #box>div>.a 111
        !important 慎用，优先级特别高
    -->
        <div class="a" id="box"></div>
    </body>
</html>